@import "elements";
@import "icons";

/* https://github.com/acdvorak/intellij-lessc-plugin */
@defaultFont: Trebuchet MS, Tahoma, Arial;
@middleGrey: #888;
@tocColWidth: 200px;
@tocColHeight: 231px;
@captionWidth: 340px;
@toolWidth: 120px;
@toolBack: #222;
@smallThumbWidth: 50px;
@largeThumbWidth: 150px;
@toolbarHeight: 17px;
@brightHover: #44f;
@overlayPadding: 10px;
@smallMapSize: 200px;
@scrollbarWidth: 13px;

body
{
	background-color: #000;
	margin: 0;
	padding: 0;
	font-family: @defaultFont;
	overflow: hidden;
}

a
{
	text-decoration: none;
	color: #555;
	cursor: pointer;

	&:hover { color: #000; }
}

button
{
	background: none;
	background-image: none;
	border: none;
	cursor: pointer;
	color: #fff;
	height: 100%;
	padding: 0 5px 0 5px;
	margin: 0;
	.opacity(0.6);

	i { margin: 0 2px; }

	&:hover { .opacity(1); }
	&.disabled { .opacity(0.3); }
	&.selected
	{
		background-color: #ddd;
		color: #000;
		.opacity(1);

		&:hover i
		{
			background-image: url(@blackIconUrl);
			background-position: (@size * -26) 0;   /* remove icon */
		}
	}
}

div.clear { clear: both; }

.fraction
{
	margin: 0;
	padding: 0 0 0 2px;
	font-family: Tahoma, Arial, Helvetica;
	vertical-align: baseline;

	sup, sub
	{
		padding: 0;

		font-size: 70%;
		line-height: 0;
		position: relative;
		vertical-align: baseline;
		text-align: justify;
	}
	sup { top: -0.5em; }
	sub { bottom: -0.25em; }
}

/* main display ------------------------------------------------------------ */

#photo
{
	position: absolute;
	top: @toolbarHeight;
	left: @largeThumbWidth + 2;
	z-index: 18;

	img { position: absolute; }
}

#flickr-link
{
	color: #333;
	font-family: Tahoma, Arial;
	font-size: 12px;
	position: absolute;
	bottom: 2px;
	right: 6px;
	text-align: right;
	z-index: 50;

	i { margin: 0 0 3px 6px; }
	&:hover { color: #eee; }
}

/* general overlays -------------------------------------------------------- */

div.tool
{
	position: absolute;
	top: @toolbarHeight - 1;
	background-color: #ddd;
	z-index: 50;
	border: 2px solid @toolBack;
	.border-radius(0, 4px, 4px, 0);
	border-top: none;
	display: none;
	.box-shadow(0 0 14px rgba(0, 0, 0, 0.90));

	> div.content
	{
		padding: 0 20px;

		.busy
		{
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			background-color: #fff;
			z-index: 55;
			.opacity(0.8);
			background-image: url(/image/ajax-loader.gif);
			background-repeat: no-repeat;
			background-position: center center;
		}
	}

	div.bar
	{
		clear: both;
		position: relative;
		padding: 3px 0 2px 10px;
		font-size: 12px;
		line-height: 14px;
		margin: 0;
		background-color: @middleGrey;
		color: #fff;
		min-height: 15px;
		.border-radius(0, 2px, 2px, 0);

		.content { margin-right: 15px; }

		&.bar-top { border-top: 2px solid @toolBack; }

		.buttons
		{
			position: absolute;
			top: 0;
			height: 100%;
			width: 100px;
			right: 0;
			text-align: right;
			white-space: nowrap;

			button
			{
				cursor: pointer;
				margin: 1px 6px 0 0;
				padding: 0;
				.opacity(0.7);
				&:hover { .opacity(1); }

				i { vertical-align: top; }
			}
		}
	}
}

/* scrollbar --------------------------------------------------------------- */

.noSelect { .user-select(none); }    /* supports tinyscrollbar */

div.tool
{
	.viewport { overflow: hidden; position: relative; }
	.overview { position: absolute; top: 0; left: 0; }

	.scrollbar
	{
		position: relative;
		float: right;
		width: @scrollbarWidth;

		.track
		{
			background-color: #eee;
			height: 100%;
			width: @scrollbarWidth;
			position: relative;
			padding: 0;

			> i { position: absolute; left: 0; .opacity(0.1); z-index: 10; }
			.icon-chevron-up { top: 0; }
			.icon-chevron-down { bottom: 2px; }

			&:hover > i { .opacity(0.5); }
		}

		.thumb
		{
			height: 20px;
			width: @scrollbarWidth;
			cursor: pointer;
			overflow: hidden;
			position: absolute;
			top: 0;
			z-index: 20;
			border-top: 1px solid #fff;
			border-bottom: 1px solid #fff;
			.box-sizing(border-box);
			.opacity(0.3);

			i { .opacity(0.1); position: absolute; left: 0; top: 50%; margin-top: (@size - 4) * -1; }

			.end { overflow: hidden; height: 5px; width: @scrollbarWidth; }

			&:hover { .opacity(1); }
		}
		.thumb .end,
		.thumb { background-color: #777; }


		.disable { display: none; }
	}
}

/* table of contents ------------------------------------------------------- */

#menu
{
	width: @tocColWidth * 3;
	overflow: hidden;
	left: @smallThumbWidth * 2;
	z-index: 85;

	> .content { height: @tocColHeight; padding: 0; }

	div.column
	{
		float: left;
		height: @tocColHeight;
		width: @tocColWidth;
		overflow-x: hidden;
		overflow-y: scroll;
	}

	ul
	{
		padding: 0;
		margin: 0;
		position: relative;
		width: 100%;
		list-style: none;

		li
		{
			cursor: pointer;
			position: relative;
			color: #444;
			border-bottom: 1px solid #aaa;
			white-space: nowrap;
			padding: 5px 4px 4px 10px;
			overflow: hidden;

			&:hover, &.selected
			{
				background-color: #fff;
				color: #000;
			}
			i { display: none; }
		}

		&.collections
		{
			li
			{
				height: 26px;
				font-size: 18px;

				i
				{
					position: absolute;
					right: 4px;
					top: 9px;
					.opacity();
				}

				&:hover, &.selected
				{
					background-color: #fff;
					i { display: block; }
				}
			}
		}

		&.sets
		{
			li
			{
				height: 20px;
				font-size: 15px;
				color: #222;
				padding: 2px 0 2px 8px;

				.fade
				{
					position: absolute;
					top: 0;
					right: 0;
					width: 30px;
					height: 40px;
					background: url(/image/right-fade.png) repeat-y;
				}
			}
		}
	}

	.bar
	{
		.content
		{
			padding-left: 0;
			h1 { font-size: 19px; margin: 5px 0 7px 0; }
			p { margin: 0; }
		}
	}
}

/* help -------------------------------------------------------------------- */

#help
{
	@keySize: 25px;

	> .content
	{
		width: 150px;
		height: 250px;
		padding: 0 10px;

		h1 { padding: 10px 0; margin: 0; color: #888; font-size: 18px; text-align: center; }
		dl { margin: -2px 0 0 8px; padding: 0; }
		dt
		{
			float: left;
			clear: left;
			font-weight: bold;
			text-align: center;
			vertical-align: middle;
			border: 2px solid #888;
			.rounded(8px);
			display: block;
			width: @keySize;
			height: @keySize;
			margin: 2px;
			background-color: #eee;

			&.f-key { font-size: 15px; padding-top: 3px; letter-spacing: -2px; }
			i { margin-top: 5px; }
		}

		dd
		{
			display: block;
			float: left;
			font-size: 12px;
			margin: 0;
			padding: 8px 0 0 3px;
		}
	}
}

/* about ------------------------------------------------------------------- */

#about
{
	width: 200px;

}

/* quote ------------------------------------------------------------------- */

#quote
{
	position: absolute;
	display: none;
	width: 325px;
	background-image: url('/image/left-quote.png');
	background-position: 5px 5px;
	background-repeat: no-repeat;

	> .content
	{
		font-family: Georgia, Times New Roman, Times;
		font-size: 18px;
		line-height: 1.5em;
		padding: 25px 25px 25px 55px;
	}

	.bar
	{
		.buttons { width: 100px; }
		.content
		{
			margin-right: 40px;
			font-family: Georgia, Times New Roman, Times;
			font-style: italic;
			line-height: 1.3em;
			font-size: 16px;
			padding: 0;
		}
	}
}

/* EXIF -------------------------------------------------------------------- */

#camera
{
	min-height: 100px;
	min-width: 200px;
	font-size: 14px;

	.content { padding: 0; }

	.settings, .tools { float: left; padding-top: 10px; }

	.settings
	{
		margin: 0 10px 5px 10px;

		div
		{
			text-align: center;
			margin: 0 0 5px 0;
			padding: 0 4px;
			background-color: #f5f5f5;
			.rounded(3px);
		}
	}

	.tools
	{
		margin-left: 10px;

		h4 { margin: 0; line-height: 1.2em; }
		p { margin: 2px 10px 8px 0; padding: 0; }
	}

}

/* embed -------------------------------------------------------------------- */

#embed
{
	width: 300px;

	.content
	{
		padding: 10px 20px 10px 15px;

		textarea
		{
			width: 100%;
			height: 9em;
			font-family: Consolas, "Courier New", Courier;
			overflow: none;
		}
	}
}

/* share ------------------------------------------------------------------- */

#share
{
	>.content
	{
		padding: 20px;

		label { width: 60px; text-align: right; padding-right: 4px; }
	}
}

/* Twitter ----------------------------------------------------------------- */

#twitter
{
	padding: 0;
	width: 250px;
	height: 100px;

	.bar
	{
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.tweet, .query { }

	.content
	{
		padding: 0;

		.tweet_list
		{
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: 0;
			padding: 0;
			overflow-y: scroll;
			list-style: none;

			li
			{
				/*overflow-y: auto;*/
				overflow-x: hidden;
				list-style-type: none;
				font-size: 13px;
				line-height: 1.3em;
				padding-bottom: 10px;
				border-top: 1px solid #666;
				padding: 8px;

				&.tweet_even { background-color: #eee; }

				.tweet_avatar
				{
					padding-right: .5em;
					float: left;
					img { vertical-align: middle; }
				}
				.tweet-time a
				{
					color: #330000;

				}
			}
		}

	}
}


/* caption ----------------------------------------------------------------- */

#caption
{
	position: absolute;
	top: auto;
	bottom: 22px;
	right: 0;
	width: @captionWidth;
	display: none;
	background-color: transparent;
	border-right: none;

	.bar
	{
		.content
		{
			font-size: 18px;
			line-height: 1em;
			&.default { color: #bbb; }
		}
	}

	.content
	{
		padding: 0;

		.viewport
		{
			height: 165px;
			background-color: #fff;

			.description
			{
				font-family: Georgia, Times New Roman, Times;
				margin: 0;
				padding: 10px 8px 22px 18px;
				font-size: 16px;
				line-height: 19px;

				p
				{
					text-indent: 30px; margin: 4px 0 0 0; padding: 0;
					.first, .haiku { margin-top: 0; text-indent: 0; }
					.haiku
					{
						font-size: 20px;
						line-height: 25px;
						padding: 3px 0 6px 10px;
						font-style: italic;
					}
				}

				sup { color: #900; vertical-align: top; font-size: 20px; }
				p:first-child { text-indent: 0; }

				div.footnotes
				{
					border-top: 1px solid #ddd;
					padding-top: 4px;
					font-family: @defaultFont;
					font-size: 13px;
					margin-top: 15px;

					p { text-indent: 0; margin: 0; padding-left: 15px; line-height: 14px; }
					sup { font-size: 13px; padding-right: 6px; }

					a:hover { color: @brightHover; }
				}
			}
		}

		.date-taken
		{
			font-size: 13px;
			line-height: 1em;
			background-color: #fff;
			.opacity(0.7);
			border-top: 1px solid #ccc;
			padding: 0 4px 0 0;
			height: 15px;
			text-align: right;
		}
	}
}

/* comments ---------------------------------------------------------------- */

#comment
{
	width: 200px;

	.content
	{
		a { padding-left: 28px; font-weight: bold; }
		a:hover { color: @brightHover; }

		padding-bottom: 20px;

		#flickr-comment { background: url(/image/flickr-icon.png) no-repeat 5px 2px; }
		#fb-comment { background: url(/image/facebook-icon.png) no-repeat 5px 2px; }
	}
}

/* map --------------------------------------------------------------------- */

#map
{
	> .content
	{
		top: 0;
		left: 0;
		width: @smallMapSize;
		height: @smallMapSize;
	}
	.bar { padding-left: 0;	}
}

#map-close
{
	position: absolute;
	top: -9px;
	right: -9px;
	width: 19px;
	height: 21px;
	background-color: #000;
	border: 2px solid #ddd;
	.rounded(12px);
	color: #666;
	font-weight: bold;
	font-size: 25px;
	line-height: 18px;
	padding-left: 3px;
	cursor: pointer;
	display: none;

	&:hover { color: #fff; border-color: #fff; }
}

div.info-photo
{
	margin: 0;
	padding: 0;

	img { border: 1px solid #000; }
}

/* toolbar ----------------------------------------------------------------- */

#toolbar
{
	position: absolute;
	z-index: 55;
	left: 0;
	top: 0;
	height: @toolbarHeight;
	right: 0;
	color: #fff;
	font-size: @toolbarHeight - 2;
	line-height: @toolbarHeight - 2;
	padding: 0 0 0 (@smallThumbWidth * 1.5 - 8);
	background-color: @toolBack;
	z-index: 105;

	#filmstripButton { display: none; }
	#zoomButton .icon-zoom-out { display: none; }
	#playButton .icon-pause { display: none; }
	#mapButton
	{
		padding-right: 0;
	}

	button
	{
		padding-top: 1px;
		padding-bottom: 2px;
		margin: 0 2px 0 0;
		i { margin-top: 0; }
		/*&.selected { height: @toolbarHeight - 2; border: none; }*/

	}

	.rightSide
	{
		position: absolute;
		padding: 0;
		margin: 0;
		top: 0;
		height: @toolbarHeight;
		right: @toolbarHeight + 2;

		button { float: right; }
	}
}

/* film strip -------------------------------------------------------------- */

#strip-container
{
	position: absolute;
	top: @toolbarHeight;
	bottom: 0;
	left: 0;
	width: @largeThumbWidth;
	overflow: hidden;
	z-index: 60;

	#strip
	{
		position: absolute;
		top: 0;
		left: 0;
		.opacity(0.7);

		img
		{
			display: block;
			border: 2px solid @toolBack;
			cursor: pointer;
			margin: -2px 0 0 -2px;

			&.selected
			{
				margin-top: 0;
				margin-bottom: 2px;
				border-color: #fff;
			}

			&:hover { .box-shadow(0 0 10px rgba(0, 0, 0, 1)); }

		}
	}

	#strip-back
	{
		position: absolute;
		background-color: @toolBack;
		top: 0;
		left: 0;
		bottom: 0;
		width: @smallThumbWidth;
	}

	#strip-top, #strip-bottom
	{
		position: absolute;
		left: 0;
		right: 0;
		width: 100%;
		height: 100px;
		z-index: 75;
	}
	#strip-top { top: 0; }
	#strip-bottom { bottom: 0; }
}

/* tools ------------------------------------------------------------------- */

#tools
{
	position: absolute;
	top: 300px;
	.rounded(12px);
	padding: 20px;
	display: none;
	z-index: 150;
	width: @toolWidth;
	background-color: #fed;
	border: 2px solid #300;
	text-align: center;
	font-size: 20px;
	left: 50%;
	margin-left: @toolWidth / -2;

	a { display: block; }
}